<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="prjVirtname" label="名字" >
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button @click="openAndScoring(scope.$index, scope.row)" type="text" size="small">查看并打分</el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="查看并打分" 
        :before-close="close"
        :visible.sync="ScoringDialogVisible"  lock-scroll="false" fullscreen="true">
            <el-form :model="formdata" label-position="left"
                            label-width="250px" 
                            ref="formdata">
                <el-row :gutter="18">
                    <el-col :span="12">
                        <el-form-item :label="item.scName+'('+item.scMinvalue+'~'+item.scMaxvalue+')'" 
                        
                            :rules="[{required: true, message: '评分不能为空', trigger: 'blur'},
                                    { pattern: /^([1-9]|[1-9][0-9])(\.\d{1,3})?$/,message: '大于等于1，小于100，小数部分最多三位', trigger: 'blur'}
                            ]" :prop="'criterions.'+index+'.scValue'" v-for="(item,index) in formdata.criterions">
                            <el-input v-model="item.scValue" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="item.scName+'评价'" :prop="'criterions.'+index+'.scComment'"
                            v-for="(item,index) in formdata.criterions" 
                            
                            >
                            <!-- :rules="[{required: true, message: '评价不能为空', trigger: 'blur'}]" -->
                            <el-input v-model="item.scComment" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                
                
                
            </el-form>
            
            <vue-office-docx :src="prjurl"  @rendered="rendered"  v-if="suffix ==='docx' "/>
            <vue-office-pdf :src="prjurl" @rendered="renderedHandler" @error="errorHandler" v-if = "suffix==='pdf' " />
            
            <el-card shadow="hover" id="fileContent" style="white-space: pre-wrap;" v-if = "suffix ==='txt' ">
                {{textContent}}
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
    
</template>

<script>
    //引入VueOfficeDocx组件
    import VueOfficeDocx from '@vue-office/docx'
    //引入相关样式
    import '@vue-office/docx/lib/index.css'
    import VueOfficePdf from '@vue-office/pdf'
    export default {
        components: {
            VueOfficeDocx,
            VueOfficePdf
        },
        data() {
            return {
                formdata:{
                    criterions: [],
                },
                textContent : "",
                scoreprjid:'',
                proIndex:'',
                suffix:'',
                tableData:[],
                ScoringDialogVisible:false,
                class:'',
                
                scoringdetails:[],
                prjurl: '' //设置文档网络地址，可以是相对地址
            }
        },
        methods: {
            cancel(){
                this.$refs.formdata.resetFields();
                this.ScoringDialogVisible = false;
                
            },
            close(){
                this.$refs.formdata.resetFields();
                this.ScoringDialogVisible = false;
            },
            submit(){
                this.$refs.formdata.validate((valid) => {
                    if (valid) {
                        var scoredetails=[];
                        this.formdata.criterions.forEach(item=>{
                            scoredetails.push({
                                sdId1: '',
                                sdCriterionid1:item.scId,
                                sdClassid1:this.class,
                                sdScore1:item.scValue,
                                sdComment1:item.scComment,
                                sdPrjid:this.scoreprjid,
                                sdProid:this.proIndex,
                                sdTime1:''
                            })
                        })
                        console.log(scoredetails);
                        this.$axios({
                            method:'post',
                            url:"http://localhost:8080/firstscoring/recordDetailScores",
                            data:JSON.stringify(scoredetails),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(res=>{
                            if(res.data.code ==1){
                                this.close();
                               // this.ScoringDialogVisible = false;
                                this.formdata.criterions=[];
                                this.fetchData();
                            }else{
                                this.$message.error("未知错误");
                            }
                        })
                        
                    }
                })
            },
            async fetchData(){
               this.$axios({
                    method: 'get',
                    url: "http://localhost:8080/professors/findById",
                    params: {
                        userId: this.$store.state.userdata.userId
                    }
                }).then(res=>{
                    if(res.data.code==1){
                        this.class = res.data.data.proClass;
                        this.proIndex = res.data.data.proIndex;
                         this.$axios({
                            method: 'post',
                            url: "http://localhost:8080/firstscoring/prjsScoreByProId",
                            data: {
                                proIndex: this.proIndex
                            },
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(result=>{
                            this.tableData = result.data.data;
                        })
                        this.$axios({
                            method: 'post',
                            url: "http://localhost:8080/scoringcriterion/findByClass",
                            data: {
                                classId: this.class
                            },
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(res => {
                            if (res.data.code == 1) {
                                var data = res.data.data;
                                data.forEach(item=>{
                                    this.formdata.criterions.push({
                                        scId:item.scId,
                                        scProp: 'creterion'+item.scId,
                                        scName : item.scName,
                                        scContent : item.scContent,
                                        scWeight : item.scWeight,
                                        scMinvalue : item.scMinvalue,
                                        scMaxvalue : item.scMaxvalue,
                                        scValue : '',
                                        scComment : '',
                                    })
                                    
                                })
                                
                            }

                        })
                        console.log(this.formdata.criterions);
                        
                    }
                })
            },
            openAndScoring(index, row){
                var prjdata = Object.assign({}, row)
                this.suffix = prjdata.prjVirtname.split('.').pop();
                this.scoreprjid = prjdata.prjIndex;
                this.prjurl = prjdata.prjUrl;
                if(this.suffix==='txt'){
                    const transformData = (data) => {
                        return new Promise((resolve) => {
                            let reader = new FileReader();
                            reader.readAsText(data, 'UTF-8');
                            reader.onload = () => {
                                resolve(reader.result)
                            }
                        })
                    }


                    this.$axios.get(this.prjurl, {
                        responseType: "blob",
                        transformResponse: [data => new Promise((resolve, reject) => {
                            transformData(data).then(resolve).catch(reject);
                        })]
                    }).then(response => {
                        response.data.then(data => {
                            this.textContent = data;
                        }).catch(error => {
                            console.error('Error processing data:', error);
                        });
                    }).catch(error => {
                        console.error('Error fetching data:', error);
                    });

                    
                
                }
                this.ScoringDialogVisible = true;
            },
            rendered() {
                console.log("渲染完成")
            }
        },
        mounted(){
            this.fetchData();
        }
    }
</script>
<style scoped>
.el-card{
    font-size: 18px;
    padding: 70px;
    line-height: 3;
    text-align: left;
}
</style>